<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_页面固定广告</title>
  <style>
    .top{
      background-color: #5AA4AE;
      height: 120px;
      color: #FFF;
      position: fixed;
      font-size: 30px;
      top: 0;
      width: 100vw;

    }
    .left,.right{
      width: 60px;
      height: 200px;
      position: fixed;
      top: 300px;

    }
    .left{
      background-color: #FFF799;
      left: 20px;
    }
    .right{
      background-color: #F35336;
      right: 20px;
    }
    .main{
      margin-top: 130px;
    }
  </style>
</head>
<body>
<div class="top">我是顶部广告</div>
<div class="left">我是左侧广告</div>
<div class="right">我是右侧广告</div>
<div class="main">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus doloribus, error ipsum molestias porro quasi
    sapiente similique sit ut vitae. Ad blanditiis distinctio fugiat nihil odit officiis omnis temporibus voluptatem.
  </div>
  <div>Ab aliquam aliquid at autem culpa cupiditate debitis eius eos exercitationem, explicabo facilis iusto labore
    libero nam necessitatibus neque nobis numquam pariatur possimus quae quam recusandae, reiciendis repudiandae ullam
    voluptates.
  </div>
  <div>A atque non porro praesentium quos reiciendis tenetur vel? Aliquid beatae consequuntur corporis, doloremque fuga,
    fugiat, laborum magnam molestias non officiis quo ratione reprehenderit sit soluta totam vel vitae voluptatibus.
  </div>
  <div>Aliquam aperiam culpa cumque dicta ea eaque esse exercitationem facere fugit incidunt laudantium maxime modi,
    natus nesciunt nobis officiis perspiciatis porro recusandae reiciendis, rem rerum sed soluta voluptas voluptatibus
    voluptatum.
  </div>
  <div>Dolores hic laudantium natus nostrum porro rem tempora voluptatem! At beatae dolore molestiae nesciunt quidem
    reprehenderit sint! A aliquam commodi fugit laudantium praesentium repellat repellendus unde! Ipsum maiores nobis
    sint.
  </div>
  <div>Aspernatur assumenda ducimus ea fugit laudantium, magnam maxime neque nisi. Cum eveniet optio quod. Error hic
    magnam molestiae neque omnis quos saepe ullam unde? Aliquam consectetur nemo qui quos totam!
  </div>
  <div>Accusamus animi culpa ducimus eligendi eum excepturi fugit incidunt magnam nam necessitatibus nemo, nesciunt
    nihil nostrum odio optio perferendis quibusdam quo ratione recusandae repudiandae totam ullam veniam voluptatem.
    Distinctio, et.
  </div>
  <div>Earum eius, error eum eveniet expedita explicabo id incidunt inventore neque non quae qui quo, sunt tenetur
    veniam veritatis voluptas. A accusamus adipisci maiores mollitia natus optio porro recusandae reprehenderit?
  </div>
  <div>Animi deserunt esse fuga ipsa neque nihil rem suscipit temporibus. Accusamus alias animi architecto, asperiores
    aspernatur atque beatae, distinctio ea est perspiciatis porro, repellat reprehenderit sequi soluta suscipit tempora
    ut?
  </div>
  <div>Accusantium ad cumque deserunt distinctio dolorum eos est excepturi in incidunt inventore ipsa iste itaque
    laboriosam magnam odio, omnis perferendis provident quas quod, reiciendis repudiandae rerum, saepe voluptas
    voluptate voluptatibus?
  </div>
  <div>Accusamus accusantium aperiam autem culpa deleniti dolore fugiat harum hic illum ipsum iure molestias nam
    nesciunt nulla numquam porro qui quis ratione recusandae repellendus, tempore velit voluptas voluptate voluptates
    voluptatum?
  </div>
  <div>Ab accusamus aliquam blanditiis commodi, consequatur cum doloribus et expedita impedit incidunt laboriosam
    maiores minima molestias officia omnis porro quae quaerat quas quasi quisquam quos soluta suscipit tempora,
    voluptatibus voluptatum!
  </div>
  <div>A accusantium animi assumenda autem delectus dolor doloribus dolorum eligendi eos ex facere fuga ipsum libero
    magnam modi molestias nesciunt nobis, nostrum, odio possimus qui quibusdam repellat repellendus tenetur vitae.
  </div>
  <div>Corporis hic nihil vero vitae. Adipisci alias amet architecto blanditiis, cupiditate dolore error exercitationem
    hic illo illum impedit laudantium modi nulla obcaecati officia omnis provident, quos sapiente, tempora veniam
    voluptatibus.
  </div>
  <div>Accusantium commodi corporis debitis distinctio eius eos error iste iusto laborum necessitatibus, nisi omnis
    praesentium quam, quidem, recusandae repellendus veniam voluptatibus. Atque ducimus fuga nisi quibusdam ratione.
    Dolor, quod, rem.
  </div>
  <div>Aut culpa enim, fugit iure iusto, mollitia nobis numquam, quaerat sapiente sed sunt ullam veritatis. Amet, at cum
    dignissimos doloremque id magnam non odio sunt voluptatibus. Laboriosam laborum maxime tempora?
  </div>
  <div>Adipisci animi aspernatur assumenda blanditiis distinctio ducimus impedit incidunt iste iusto libero minima nam
    natus nemo neque nesciunt non numquam possimus, quisquam recusandae sint soluta tenetur vero? Alias, consequatur,
    ipsum.
  </div>
  <div>Atque cum cumque deleniti distinctio dolores ea eos, esse, explicabo fugiat id laudantium minima optio
    perspiciatis quaerat quisquam, reiciendis repellat reprehenderit similique sunt suscipit temporibus ullam veniam
    voluptate voluptates voluptatum.
  </div>
  <div>Beatae delectus earum eum ipsa modi omnis, voluptate. Amet assumenda delectus deserunt dicta dolorem dolores
    doloribus error et, ex excepturi, fuga fugit illo maxime obcaecati, perspiciatis quod sapiente soluta veniam.
  </div>
  <div>Earum facere nam placeat praesentium temporibus! Consequuntur dignissimos earum excepturi fugit in itaque
    nesciunt officiis provident quasi quis, repellendus reprehenderit sunt ut. Deserunt distinctio esse fuga fugit quos
    rem voluptate.
  </div>
  <div>Ab corporis, dicta doloremque et excepturi id ipsam laborum maiores maxime natus sed sunt temporibus? Alias autem
    ea error, facere illum impedit maxime minus odit quas sapiente sint, vitae voluptas?
  </div>
  <div>Cumque deleniti et fugit harum incidunt laudantium molestiae nemo, perferendis quisquam quo vel veritatis vitae.
    Aliquam animi cum enim eos quas repudiandae tempora vitae, voluptatem? Beatae cupiditate itaque placeat ullam.
  </div>
  <div>Alias amet assumenda corporis cumque delectus deserunt doloremque ducimus est et ex fuga fugiat impedit incidunt,
    ipsum modi mollitia necessitatibus nemo non odit possimus ratione suscipit voluptas voluptatum. Doloribus, est.
  </div>
  <div>Ab amet, animi architecto consequatur cumque dolorem doloribus earum facilis hic incidunt iure nihil odio optio
    quidem repudiandae sapiente soluta temporibus vitae? Accusamus atque corporis in perferendis placeat repellat sed.
  </div>
  <div>Corporis cum, est facilis ipsa nam quod ullam voluptatem! Atque deleniti dolorum fugiat ipsa magni nesciunt optio
    placeat quasi quisquam voluptatem? Adipisci beatae corporis praesentium quibusdam quisquam quod velit voluptates.
  </div>
  <div>A ad aut beatae, culpa eligendi eos, ex exercitationem laborum magnam neque nobis, nostrum officiis optio placeat
    quidem ratione sed? Autem cumque, deserunt dicta harum maiores minima ratione vitae voluptatum.
  </div>
  <div>A animi architecto aspernatur aut beatae, cum deserunt dolorem enim fugiat id ipsa nam perferendis quod sequi
    voluptatem? Animi dolores fuga maxime minima mollitia nulla odit rem veniam vitae voluptatem!
  </div>
  <div>A accusamus autem, cumque, delectus dicta dolor, dolore ducimus enim facere fugiat inventore laborum natus nihil
    omnis placeat possimus quam quidem recusandae similique sunt ut veniam voluptas voluptatem? Cumque, ullam?
  </div>
  <div>Aspernatur consequatur cupiditate doloremque eius eveniet ipsa itaque laborum natus nesciunt, nobis porro, qui
    reiciendis repellat sapiente sed sit soluta voluptates. Amet autem, consectetur esse eum fugiat incidunt. Dolore,
    sint?
  </div>
  <div>Alias corporis delectus deserunt iure laborum! Accusamus ad aliquid dignissimos distinctio error ipsa ipsum magni
    vel. At atque blanditiis ipsum minima nam nobis, omnis porro sequi? Delectus nam possimus temporibus.
  </div>
  <div>Alias aliquam architecto blanditiis, cumque error incidunt ipsa natus nisi perspiciatis placeat possimus quas
    quod ratione recusandae tempora temporibus totam velit veniam? Distinctio ducimus ea, expedita itaque necessitatibus
    qui sint?
  </div>
  <div>Ab ad amet aspernatur consectetur cupiditate ea, explicabo hic illo impedit inventore ipsum laboriosam laudantium
    necessitatibus neque nobis non odit pariatur possimus quam ratione reiciendis repudiandae unde vero voluptates
    voluptatum!
  </div>
  <div>Ab accusantium beatae cumque dignissimos dolorem doloribus fugiat incidunt, iusto libero magnam magni maiores non
    omnis porro praesentium quae quaerat, quas quibusdam quidem quis quisquam reprehenderit temporibus ut vitae
    voluptate.
  </div>
  <div>Accusantium ad aut beatae consectetur consequatur cum deserunt dicta dolor eius eveniet ex, explicabo fugiat
    laborum modi natus nulla officia optio quasi reiciendis rem repudiandae tempore tenetur voluptate voluptatem
    voluptatum!
  </div>
  <div>Debitis deserunt eum facilis harum id labore minus officia praesentium quos sapiente. Cum eos, nisi officiis
    optio provident qui quisquam sed similique soluta tenetur totam vero, vitae voluptas voluptates voluptatum.
  </div>
  <div>A corporis id ipsa nihil quibusdam quidem sunt! Ab aliquid consectetur, corporis explicabo in, ipsum libero
    molestias quas quasi quisquam unde vitae. Aperiam cumque itaque iusto nam similique! Cumque, magnam.
  </div>
  <div>Accusamus alias aliquam, culpa dolorum ducimus, eum excepturi expedita facere harum ipsum minima minus nam nulla
    omnis perferendis perspiciatis quam qui sint sunt voluptate. Dicta excepturi vel velit veniam voluptatem?
  </div>
  <div>Cum fuga iure libero nam, repellendus sint tenetur! Iusto libero modi nulla! A amet, at consequuntur cum debitis,
    dignissimos eaque excepturi necessitatibus odio qui repudiandae saepe sit tenetur ut vero.
  </div>
  <div>Debitis, deleniti, ducimus eaque earum facilis fuga incidunt inventore ipsam libero magni molestiae nam nihil
    nobis quos repellat rerum sapiente totam. Aspernatur delectus eius maiores nihil qui recusandae similique ullam.
  </div>
  <div>Alias amet dolor ducimus earum expedita illum, magni molestias nobis officia quas? Dolores eius explicabo libero
    magni maiores, minus nesciunt, odit quibusdam tempora, totam unde vel voluptate voluptatem? Eligendi, sequi.
  </div>
  <div>A, aliquid aperiam, assumenda delectus distinctio doloremque dolores eligendi esse libero nobis, nostrum numquam
    optio quod voluptate voluptatem. Accusamus dignissimos, enim error eveniet magnam natus nulla reprehenderit rerum
    tempore temporibus?
  </div>
  <div>Beatae consequatur ducimus eos rerum! Accusamus ad aperiam commodi corporis cupiditate distinctio doloremque eos,
    esse fugit id illum incidunt, iste laboriosam laborum neque nihil nisi quasi, quidem quisquam quod voluptates.
  </div>
  <div>Architecto assumenda consequuntur dicta distinctio dolor dolore ex fugiat hic impedit in incidunt ipsa iusto
    laudantium neque nisi nulla omnis optio reiciendis repellat, repudiandae rerum sapiente voluptatem. Explicabo,
    ratione, sed.
  </div>
  <div>Aliquam, harum, porro? Aperiam atque distinctio dolore doloremque dolores, doloribus dolorum eaque error expedita
    iure libero, minima molestias nemo nobis quae quaerat qui quidem quo rem sapiente suscipit voluptate voluptatum.
  </div>
  <div>Consectetur consequuntur, dolores eius esse officiis recusandae repellendus saepe ut. Deleniti esse est iure nam
    natus necessitatibus nostrum, possimus quidem tempore. Alias aspernatur aut beatae eaque et libero molestias quis.
  </div>
  <div>Beatae commodi dolor est fuga, fugit ipsa natus quas qui? Ab ad alias blanditiis dolores eaque eos explicabo illo
    in ipsum libero minus nesciunt perspiciatis quo quod, repudiandae sapiente sit?
  </div>
  <div>Adipisci aliquam commodi dolorem doloremque est exercitationem hic, laboriosam laborum minus nostrum praesentium,
    quibusdam quidem reprehenderit rerum tenetur ullam velit. Architecto autem commodi earum eos obcaecati, perferendis
    repudiandae temporibus. Enim.
  </div>
  <div>Cupiditate debitis maxime minima non porro! Accusamus aliquid, atque corporis dolores eos esse eum explicabo
    facilis id in itaque iure labore minus modi nam nostrum quos, ratione recusandae totam veritatis?
  </div>
  <div>Ad at est hic inventore ipsa labore recusandae sit suscipit, velit veniam? Blanditiis earum eveniet, excepturi
    facere iste magnam maxime mollitia nam natus omnis pariatur perferendis qui, quo sed, voluptate?
  </div>
  <div>Ab aut ea fugit id labore laborum minus possimus quibusdam tenetur, voluptas. Autem beatae consectetur dolor
    doloremque eius ex molestiae molestias quisquam, reiciendis sed similique, voluptatem. Eveniet ex incidunt nemo.
  </div></div>
</body>
</html>